<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- Hello Word程序：app -->
		<div id="app">
			{{message}}
		</div>

		<!-- attribute绑定：app2 -->
		<div id="app2">
			<span v-bind:title="message">
				鼠标悬停几秒钟查看此处动态绑定的提示信息！
			</span>
		</div>

		<!-- v-if的使用：app3 -->
		<div id="app3">
			<p v-if="isShow">你现在能够看到我了！</p>
		</div>
		
		<!-- v-for的使用 -->
		<div id="app4">
			<!-- 有序列表 -->
			<ol>
				<li v-for="item in dataList">
					{{item.text}}
				</li>
			</ol>
		</div>
		
		<!-- v-on的使用 -->
		<div id="app5">
			{{ message }}
			<button type="button" v-on:click="reverseMessage">反转文字</button>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					message: "Hello Word!"
				}
			})

			var app2 = new Vue({
				el: "#app2",
				data: {
					message: '页面加载于 ' + new Date().toLocaleString()
				}
			})

			var app3 = new Vue({
				el: "#app3",
				data: {
					isShow: true
				}
			})
			
			var app4 = new Vue({
				el:"#app4",
				data:{
					dataList:[
						{text:'第一条数据'},
						{text:'第二条数据'},
						{text:'第三条数据'},
						{text:'第四条数据'}
					]
				}
			})
			
			var app5 = new Vue({
				el:"#app5",
				data:{
					message:"hello vue!"
				},
				methods:{
					reverseMessage:function(){
						this.message = this.message.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>
